<template>
    <section class="container main-bar _display_flex">
        <section class="tbas-bar _display_flex">
            <icon class-name="iconzuozuo" class="tbas-die" size='24px' @click.native="tabs('left')"></icon>
            <div class="menu-list">
                <ul ref="menu-list">
                    <li class="" :class="{active: activeIndex == item.index}" :data-index="item.index" v-for="(item, index) in asideItem" :key="index" @click="getRouter(item)" @contextmenu.prevent="contextmenu($event, item)">
                        <span>{{item.title}}</span>
                        <icon class-name="el-icon-close" class="tbas-icon" size='16px' @click.native.stop="closeNav(item)" ></icon>
                    </li>
                </ul>
            </div>
            <icon class-name="iconyouyou"  class="tbas-die" size='24px' @click.native="tabs('right')"></icon>
        </section>
        <section class="container router-view _scrollbar">
            <router-view></router-view>
        </section>

        <!-- 右键冒泡 -->
        <div class="right-hand" v-if="rightHandShow" :style="{ left: rightHandLeft, top: rightHandTop }">
            <ul>
                <li @click="closeRightHand(1)">关闭当前导航</li>
                <li @click="closeRightHand(2)">关闭其他导航</li>
                <li @click="closeRightHand(3)">关闭全部导航</li>
            </ul>
        </div>
    </section>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    name: 'Main',
    title: '主体',
    computed: {
        ...mapGetters(['asideItem', 'activeIndex']),
    },
    watch: {
        activeIndex() {
            this.navMuneSwitch()
        }
    },
    methods: {
        // 获取当前元素
        each(array, fn) {
            for(let i=0; i < array.length; i++){
                fn && fn.call(array[i], i)
            }
        },
        // 导航菜单切换
        navMuneSwitch() {
            this.$nextTick(() => {
                let activeIndex = this.activeIndex
                let refs = this.$refs['menu-list']
                let clientWidth = refs.clientWidth
                let scrollWidth = refs.scrollWidth
                // 判断是否已经存在.
                this.each(refs.children, function() {
                    let index = this.getAttribute('data-index')
                    let left = this.offsetLeft
                    if(index == activeIndex){
                        // 判断是否出现滚动
                        if(scrollWidth > clientWidth + left){
                            refs.style.transform = `translateX(${-left}px)`
                        }else{
                            refs.style.transform = `translateX(${clientWidth - scrollWidth}px)`
                        }
                    }
                })
            })
        },
        // 左右切换
        tabs(type) {
            let refs = this.$refs['menu-list']
            let clientWidth = refs.clientWidth
            let scrollWidth = refs.scrollWidth
            if(type == 'left'){
                refs.style.transform = `translateX(${0}px)`
            }else{
                refs.style.transform = `translateX(${clientWidth - scrollWidth}px)`
            }      
        },
        // 跳转
        getRouter(item) {
            // 保存菜单索引
            this.$store.commit('getActiveIndex', item.index)
            this.$router.push({
                path: item.route
            })
        },
        // 关闭导航
        closeNav(item) { 
            let activeIndex, route
            let asideItem = this.asideItem.filter((v, i, arr) => {
                // 判断是否是当前导航，保存新的索引
                if( item.index == v.index){
                    /**
                     * 判断是否是选中导航
                     * 否新的索引是选中的索引
                     */
                    if(item.index == this.activeIndex){
                        // 判断是否是选中的第一个，否新的索引是往前一个
                        if(i == 0){
                            // 判断导航菜单数量是否是一个，是就初始化，新的索引是首页，否新的索引是往后一个
                            if(arr.length == 1){
                                activeIndex = '1'
                                route = '/'
                            }else{ // 否新的索引是往后一个
                                activeIndex = arr[i+1].index
                                route = arr[i+1].route
                            }
                        }else{ // 否新的索引是往前一个
                            activeIndex = arr[i-1].index
                            route = arr[i-1].route
                        }
                    }else{ // 否新的索引是选中的索引
                        activeIndex = this.activeIndex
                    }
                }
                return v.index != item.index
            })
            // 重新赋值索引
            this.$store.commit('getActiveIndex', activeIndex)
            // 跳转到新的导航
            this.$router.push({
                path: route
            })
            // 重新初始化导航菜单
            this.$store.commit('getAsideItem', asideItem)
        },
        // 点击鼠标右键
        contextmenu(event, item) {
            let top = event.pageY
            let left = event.pageX
            this.rightHandLeft = left + 'px'
            this.rightHandTop = top + 'px'
            this.rightHandShow = true
            // 保存当前导航
            this.rightHandAsideItem = item
            // 给docm添加关闭鼠标监听事件
            document.addEventListener('click', this.closeFoo);
        },
        // 关闭鼠标监听
        closeFoo(){
            this.rightHandShow = false
            // 给docm移除关闭鼠标监听事件
            document.removeEventListener('click', this.closeFoo)
        },
        // 右键关闭导航
        closeRightHand(type) {
            switch(type){
                case 1:
                    // 关闭当前导航
                    this.closeNav(this.rightHandAsideItem)
                break;
                case 2:
                    // 关闭其他导航
                    this.$store.commit('getAsideItem', [this.rightHandAsideItem])
                    this.$store.commit('getActiveIndex', this.rightHandAsideItem.index)
                    this.$router.push({
                        path: this.rightHandAsideItem.route
                    })
                break;
                case 3:
                    // 关闭全部导航, 回到首页
                    this.$store.commit('getAsideItem', [])
                    this.$store.commit('getActiveIndex', '1')
                    this.$router.push({
                        path: '/'
                    })
                break
            }
        },
    },
    data() {
        return {
            rightHandShow: false,
            rightHandLeft: 0,
            rightHandTop: 0,
            rightHandAsideItem: ''
        }
    },
    mounted() {
        // 初始化 导航位置
        this.navMuneSwitch()
    },


}
</script>
<style lang="scss" scoped>
    .main-bar{
        flex-direction: column;
    }
    .tbas-bar{
        width: 100%;
        background: $bg-color;
        border-bottom: solid 1px $border-color;
        .menu-list{
            flex: 1;
            width: 100%;
            overflow: hidden;
            ul{
                position: relative;
                width: auto;
                height: 30px;
                white-space:nowrap;
                li{
                    display: inline-block;
                    height: 30px;
                    line-height: 30px;
                    padding:  0 10px;
                    font-size: $font-size-xs;
                    border-right: solid 1px $border-color;
                    cursor: pointer;
                    &.active{
                        background: $bg-color-blue;
                        color: $text-color;
                        border-right-color: $bg-color-blue;
                        box-sizing: border-box;
                    }
                }
            }
        }
        .tbas-icon{
            margin-left: 10px;
            margin-right: 0;
            cursor: pointer;
        }
        .tbas-die{
            cursor: pointer;
            margin: 0 10px;
            color: #ccc;
        }
    }
    .router-view{
        padding: 20px;
        box-sizing: border-box;
        flex: 1;
        box-sizing: border-box;
    }
    .right-hand{
        width: 150px;
        background: $bg-color;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 1000;
        ul{
            width: 100%;
            border: solid 1px $border-color;
            box-sizing: border-box;
            li{
                width: 100%;
                padding: 10px 20px;
                font-size: $font-size-xs;
                cursor: pointer;
                border-bottom: solid 1px $border-color;
                &:last-child{
                    border-bottom: none;
                }
            }
        }
    }
</style>